<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="artDialog/skins/default.css"
	type="text/css"></link>
<link href="css/select.css" rel="stylesheet" type="text/css" />
<title>DEMO</title>
<script type="text/javascript" src="js/apiv1.3.min.js"></script>
<!--script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script-->
<link rel="stylesheet" type="text/css" href="bmap.css" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/select-ui.min.js"></script>
<script type="text/javascript" src="artDialog/artDialog.min.js"></script>
<script type="text/javascript" src="artDialog/jquery.artDialog.min.js"></script>
<script type="text/javascript" src="artDialog/artDialog.plugins.min.js"></script>
<script type="text/javascript" src="js/util.js"></script>

</head>
<body>
	<div class="place">
		<span>位置：</span>
		<ul class="placeul">
			<li><a href="#">首页</a></li>
			<li><a href="#">消缺任务管理</a></li>
			<li><a href="#">消缺任务制定</a></li>
		</ul>
	</div>

	<div
		style="width:100%;height:95%;border:1px solid gray;position:absolute;"
		id="container"></div>

</body>
</html>
<script type="text/javascript">

	var selectPole = [];
	
	var selectPoleId ="";
	
	var mapOptions = {
		mapType : BMAP_NORMAL_MAP,
		maxZoom : 10, //地图最大层级
		minZoom : 5
	};
	
	// 百度地图API功能
	var map = new BMap.Map("container", mapOptions); 		// 创建Map实例
	var initPoint = new BMap.Point(116.404, 39.915); // 创建点坐标
	map.centerAndZoom(initPoint, 8);  // 初始化地图,设置中心点坐标和地图级别。
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]
	}));
	map.setCurrentCity("北京");			 // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);    //开启鼠标滚轮缩放
	map.enableKeyboard(); 				// 启用键盘操作。  
	map.enableContinuousZoom();        //启用连续缩放效果



	// ----- control -----
	map.addControl(new BMap.NavigationControl()); //地图平移缩放控件
	map.addControl(new BMap.ScaleControl()); //显示比例尺在右下角
	
	var overView = new BMap.OverviewMapControl();
	var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
	map.addControl(overView);          //添加默认缩略地图控件
	map.addControl(overViewOpen);      //右下角，打开

	// ----- Hide or Show Pole -----
	map.addEventListener("zoomend", function() {
		var overlays = map.getOverlays();
	    for ( var i = 0; i < overlays.length - 1; i++) {
			if (overlays[i]._config.icon) {
				 if (overlays[i]._config.icon.imageUrl.indexOf("images/circle")!=-1) {
					if (map.getViewport().zoom <= 7) {
						overlays[i].hide();
					} else {
						overlays[i].show();
					}
				} 
			} 
		}
	});
	
	
	/* ----自定义控件---- */
	// 定义一个控件类,即function
	function ZoomControl(){
	  // 默认停靠位置和偏移量
	  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
	  this.defaultOffset = new BMap.Size(75, 20);
	}
	
	function ZoomControl2(){
	  // 默认停靠位置和偏移量
	  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
	  this.defaultOffset = new BMap.Size(135, 20);
	}
	
	
	// 通过JavaScript的prototype属性继承于BMap.Control
	ZoomControl.prototype = new BMap.Control();
	ZoomControl2.prototype=new BMap.Control();

	// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
	// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
	ZoomControl.prototype.initialize = function(map){
	  // 创建一个DOM元素
	  var div = document.createElement("div");
	  // 添加文字说明
	  div.appendChild(document.createTextNode("放大2级"));
	  // 设置样式
	  div.style.cursor = "pointer";
	  div.style.border = "2px solid gray";
	  div.style.backgroundColor = "white";
	  // 绑定事件,点击一次放大两级
	  div.onclick = function(e){
		map.setZoom(map.getZoom() + 2);
	  };
	  // 添加DOM元素到地图中
	  map.getContainer().appendChild(div);
	  // 将DOM元素返回
	  return div;
	};
	
	ZoomControl2.prototype.initialize = function(map){
	  // 创建一个DOM元素
	  var div = document.createElement("div");
	  // 添加文字说明
	  div.appendChild(document.createTextNode("缩小2级"));
	  // 设置样式
	  div.style.cursor = "pointer";
	  div.style.border = "2px solid gray";
	  div.style.backgroundColor = "white";
	  // 绑定事件,点击一次放大两级
	  div.onclick = function(e){
		map.setZoom(map.getZoom() - 2);
	  };
	  // 添加DOM元素到地图中
	  map.getContainer().appendChild(div);
	  // 将DOM元素返回
	  return div;
	};
	
	// 创建控件
	var myZoomCtrl = new ZoomControl();
	var myZoomCtrl2 = new ZoomControl2();
	// 添加到地图当中
	map.addControl(myZoomCtrl);
	map.addControl(myZoomCtrl2);
	
	// ---- contextMenu ---- //添加右键菜单

	var contextMenu = new BMap.ContextMenu();
	var saveMenu = new BMap.MenuItem("保存任务",function(e,p,type){
				if(selectPoleId==""){
					defaultAlert("保存任务","您还没有选择缺陷!");
					return;
				}
				
				var typeSelect ="<div class='vocation'><select class='typeSelect'>";
				typeSelect+="<option value='任务单' >任务单</option>";
				typeSelect+="<option value='第一种单据' >第一种单据</option>";
				typeSelect+="<option value='第二种单据' >第二种单据</option>";
				typeSelect+="</select><div>";
				var html="<ul class='forminfo'><li><label>任务编号<b>*</b></label><input  type='text' id='rwbh' class='dfinput'  /></li>";
				html+="<li><label>任务名称<b>*</b></label><input  type='text' id='rwmc' class='dfinput'  /></li>";
				html+="<li><label>工作单据<b>*</b></label>"+typeSelect+"</li>";
				html+="<li><label>任务描述<b>*</b></label><textarea id='description'  class='dfinput' style='width:345px;height:80px;'></textarea></li>";
				html+="<li><label>备注<b></b></label><textarea id='remark'  class='dfinput' style='width:345px;height:80px;'></textarea></li></ul>";
				art.dialog({title:"制定消缺任务",content:html,okValue:"保存",cancelValue:"取消", cancel:function(){},ok:function(){
					var bh = document.getElementById("rwbh");
					var mc = document.getElementById("rwmc");
					var desc = document.getElementById("description");
					if(bh.value==""){
						bh.select();
						bh.focus();
						this.shake();
						return false;
					}if(mc.value==""){
						mc.select();
						mc.focus();
						this.shake();
						return false;
					}if(desc.value==""){
						desc.select();
						desc.focus();
						this.shake();
						return false;
					}
					$.post("deBug!addTask.action",{
						"debugtask.id":bh.value,
						"debugtask.name":mc.value,
						"debugtask.type":$(".typeSelect").val(),
						"debugtask.description":desc.value,
						"debugtask.remark":document.getElementById("remark").value,
						"dps":selectPoleId
					},function(data){
						var json = eval("("+data+")");
						if(json.code==1){
							defaultAlert("制定消缺任务","制定成功");
							setTimeout(function () { location.href="addDebugTask.html"; }, 2000);
						}else{
							defaultAlert("制定消缺任务","制定失败");	
						}
					});
				}});
				$(".typeSelect").uedSelect({width:345});
				},{width:60});
		contextMenu.addItem(saveMenu);
	map.addContextMenu(contextMenu);
	
	//context
	//map.addContextMenu(contextMenu);

	// ----- maker -----    // 创建杆塔
		function addPole(lng, lat, opts,color,bug) {
		var point = new BMap.Point(lng, lat);
		var myIcon = new BMap.Icon("images/circle"+color+".png", new BMap.Size(16, 16));

		var marker = new BMap.Marker(point, {
			icon : myIcon,
			enableDragging : false,
			draggingCursor : "move",
			title : "杆塔编号:"+opts+" - 巡检任务编号:"+bug.ptid
		});
		/*	var contextMenu = new BMap.ContextMenu();
			contextMenu.addItem("删除杆塔", function() {
				alert("del");
			});
			marker.addContextMenu(contextMenu);
		 */
		marker.addEventListener("mouseover", function(type, target, point,
				pixel) {
			var x = type.pixel.x;
			var y = type.pixel.y;
			var  level=["一般","严重","紧急"];
			var html="<span style=\"font-size:12px;font-weight:bolder\">线路名称:"+bug.routeName+"&nbsp;&nbsp;杆塔编号："+bug.pole.id+"&nbsp;&nbsp;缺陷等级："+level[bug.level-1]+"<br>发现人员："
					+ bug.userName + "&nbsp;&nbsp;发现时间:"+bug.time+"&nbsp;&nbsp;缺陷类型："+bug.typeName+"<br>缺陷描述："+bug.description+"</span>"
			$("body").append("<div id =\"routeDiv\"></div>")
			routeDiv = $("#routeDiv").css("position", "absolute").css("top", y-5)
					.css("left", x+5).css("z-index", 1);
			routeDiv.html(html);
		});
		marker.addEventListener("mouseout", function() {
			if (routeDiv) {
				routeDiv.remove();
			}
		});
		
		
		map.addOverlay(marker);
		return marker;
	}
	map.addEventListener("click",selectRoute);
	function selectRoute(type){
	if(!type.overlay){
		return;
	}
	if((","+selectPoleId+",").indexOf(","+type.overlay._config.title+",")!=-1){
		return;
	}
	if(selectPoleId!=""){
		selectPoleId+=","
	}
	selectPoleId+=type.overlay._config.title
	selectPole.push(type.overlay.point);
	var tt = selectPole.concat();
	if(selectPole.length>1){
	
		console.log("成员:"+tt.length);
		var polies = permutate(tt);
		var tmp=[];
		var minLength=999999999;
		var minLine;
		console.log("组合："+polies.length)
		for(var x=0;x<polies.length;x++){
			tmp=[];
			for(var m =0;m<polies[x].length;m++){
			
				tmp.push(new BMap.Point(polies[x][m].lng, polies[x][m].lat));
			}
			
			var len = calc_length(tmp);
			if(len<minLength){
				minLine=tmp.concat();
				minLength=len;
			}
			console.log(len);
		
		}
	//	alert(minLine);
		clearRoute();
		console.log("***最佳路线***");
		for(var i =0;i<minLine.length;i++){
			console.log(minLine[i]);
		}
		console.log("*******");
		addRoute(minLine,"待分配的任务","blue");
		
	}
		alert(selectPoleId);
		//type.overlay.hide();
		//selectPole
	//
	}
	
	function clearRoute(){
	
		var overlays = map.getOverlays();
			for ( var i = 0; i < overlays.length ; i++) {
			if (overlays[i]._config&&overlays[i]._className=="Polyline") {
				
					overlays[i].hide();
				
			}
		}
		}
	
		
	
	var routeDiv;
	function addRoute(points, opts, color) {

		var polyline = new BMap.Polyline(points, {
			strokeColor : color,
			strokeWeight : 3,
			strokeOpacity : 0.8,
			enableClicking :true
		});
		
		polyline.addEventListener("mouseover", function(type, target, point,
				pixel) {
			var x = type.pixel.x;
			var y = type.pixel.y;
			$("body").append("<div id =\"routeDiv\"></div>")
			routeDiv = $("#routeDiv").css("position", "absolute").css("top", y)
					.css("left", x).css("z-index", 1);
			routeDiv.html("<span style=\"font-size:12px;font-weight:bolder\">"
					+ opts + "</span>");
					
		});
		polyline.addEventListener("mouseout", function() {
			if (routeDiv) {
				routeDiv.remove();
			}
			
		});
		
		
		map.addOverlay(polyline);
	}

		
	
	function calc_length(points) {
		var length=0;
			for(var m = 1;m<points.length;m++){
			console.log(length);
				length+=map.getDistance(points[m-1],points[m]);
			}
			
			
		return length;	
	}
	function getPointByPointTitle(title){
		var overlays = map.getOverlays();
			for ( var i = 0; i < overlays.length ; i++) {
			if (overlays[i]._config) {
				if (overlays[i]._config.title==title) {
					return overlays[i]._config.point;
				}
			}
		}
	}
	
	
	$.post("pole!findHasBug.action", function(data) {
		var task = eval("("+data+")");
		var arr=["","","_red","_yellow"];
		for ( var i = 0; i < task.length; i++) {
			addPole(task[i].pole.lng, task[i].pole.lat, task[i].pole.id,arr[task[i].level],task[i]);
		}
	});


</script>
